<template>
    <transition name="el-fade-in">
        <div class="imginfo" v-if="showImgInfo">
            <div class="imginfo-imglist">
                <img v-for="(item,index) in imgList" :src="item" :key="item" v-show="imgIndex == index"/>
            </div>
            <div class="imginfo-btn imginfo-pre" @click="move('pre')" :class="{'imginfo-disabled': imgIndex === 0}"><i class="V7_iconfont V7_iconV7tubiao_zuo"></i></div>
            <div class="imginfo-btn imginfo-next" @click="move('next')" :class="{'imginfo-disabled': imgIndex === imgList.length - 1}"><i class="V7_iconfont V7_iconV7tubiao_you"></i></div>
            <div class="imginfo-close" @click="openImgInfo"><i style="font-size: 12px;margin:auto" class="V7_iconfont V7_iconV7tubiao_guanbi"></i></div>
            <div class="imginfo-total">{{imgIndex + 1}}<span style="padding: 0px 5px">/</span>{{imgList.length}}</div>
        </div>
    </transition>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({
  name: 'ImgInfo'
})
export default class ImgInfo extends Vue {
  private imgIndex: number = 0
  private showImgInfo: boolean = false
  @Prop() private imgList!: []

  private move (type: string) {
    if (type === 'pre') {
      if (this.imgIndex > 0) {
        this.imgIndex--
      }
    } else if (type === 'next') {
      if (this.imgIndex < this.imgList.length - 1) {
        this.imgIndex++
      }
    }
  }

  public openImgInfo () {
    this.showImgInfo = !this.showImgInfo
  }
}
</script>

<style lang="stylus" scoped>
.imginfo
    position: fixed
    top 50%
    left 50%
    width 800px
    height: 500px
    background: rgba(0,0,0,.4);
    box-shadow: 0px 4px 29px 0px rgba(155, 165, 172, 0.46);
    border-radius: 6px;
    transform: translate(-50%, -50%)
    z-index 10
    .imginfo-imglist
        width: 100%
        height: 100%
        display flex
        img
            max-width: 100%
            max-height: 100%
            margin auto
    .imginfo-btn
        width: 40px;
        height: 100px;
        position absolute
        top 50%
        margin-top: -50px
        background: #2F2F2F;
        opacity: 0.65;
        text-align: center
        line-height: 100px
        color: #fff
        cursor pointer
    .imginfo-disabled
        cursor: not-allowed
        i
          opacity 0.5
    .imginfo-pre
        left: 0px
        border-radius: 0px 4px 4px 0px
    .imginfo-next
        right: 0px
        border-radius: 4px 0px 0px 4px
    .imginfo-close
        width: 24px;
        height: 24px;
        background: #353535;
        opacity: 0.9;
        border-radius: 50%;
        position: absolute
        top -12px
        right -12px
        color: #fff
        display: flex
        cursor pointer
        border 2px solid #fff
    .imginfo-total
        height: 25px;
        position absolute
        left 50%
        transform: translate(-50%, 0)
        bottom: 0px
        background: #2F2F2F;
        opacity: 0.65;
        text-align: center
        line-height: 25px
        padding: 0px 10px
        color: #fff
        user-select: none
        border-radius: 4px 4px 0px 0px
</style>
